<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="令牌key" prop="appKey">
                <el-input
                    clearable
                    v-model="appKey"
                    placeholder="令牌key"
                ></el-input>
            </el-form-item>

            <el-form-item label="令牌密钥" prop="appSecret">
                <el-input
                    clearable
                    v-model="appSecret"
                    placeholder="令牌密钥"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    {{ buttons.search.name }}
                </el-button>
                <el-button @click="resetForm(queryForm, params, getDataList)">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: current,
                pageSize: size,
                total: total,
            }"
        >
            <template #tool_bar>
                <el-button
                    v-permission="['add']"
                    size="small"
                    type="primary"
                    @click="handleEdit(buttons.add.name)"
                >
                    {{ buttons.add.name }}
                </el-button>
            </template>
            <el-table-column prop="appKey" label="令牌key"></el-table-column>
            <el-table-column
                prop="appSecret"
                label="令牌密钥"
            ></el-table-column>
            <el-table-column
                prop="usedByClientId"
                label="被使用客户ID"
            ></el-table-column>
            <el-table-column prop="describe" label="描述"></el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
            ></el-table-column>
            <el-table-column
                prop="expireInTime"
                label="过期时间"
            ></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template v-slot:default="{ row }">
                    <el-button
                        v-permission="['edit']"
                        @click.prevent="handleEdit(buttons.edit.name, row)"
                        type="primary"
                        size="small"
                    >
                        {{ buttons.edit.name }}
                    </el-button>
                    <el-button
                        v-permission="['del']"
                        @click.prevent="handleDel(row)"
                        type="danger"
                        size="small"
                    >
                        {{ buttons.del.name }}
                    </el-button>
                    <el-button
                        v-permission="['copy_docker']"
                        @click.prevent="handleCopyDocker(row)"
                        type="danger"
                        size="small"
                    >
                        {{ buttons.copy_docker.name }}
                    </el-button>
                </template>
            </el-table-column>
        </ve-table>

        <!-- 编辑组件 -->
        <client-token-bucket-edit
            v-if="showDialog"
            :rowData="rowData"
            :title="dialogTitle"
            :showDialog="showDialog"
            @closeDialog="handelDialog($event)"
        />
    </div>
</template>
<script>
import cloudNetworkMenu from "@/views/pages/cloud_network/components/CloudNetworkMenu";

export default {
    data: () => ({
        description: "客户端令牌桶",
        buttons: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
            copy_docker: { name: "docker" },
        },
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "SwitchFilled",
        name: "客户端令牌桶",
        parentMenu: cloudNetworkMenu,
    }),
};
</script>

<script setup>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
//?导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    handleCurrentChange,
} from "@/views/pages/common";
import ClientTokenBucketEdit from "@/views/pages/cloud_network/components/ClientTokenBucketEdit.vue";
import useClipboard from "vue-clipboard3";
import { ElMessage } from "element-plus";
import { uuid } from "vue-uuid";

const { proxy } = getCurrentInstance();
const rowData = ref(null);
const dialogTitle = ref("");
const showDialog = ref(false);
const queryForm = ref(null);
const tableData = ref([]);
const { toClipboard } = useClipboard();
const params = reactive({
    appKey: "",
    appSecret: "",
    size: 10,
    current: 1,
    total: 0,
});
const { appKey, appSecret, size, current, total } = toRefs(params);
/**
 * @description:添加or编辑事件
 * @return {*}
 * @param title
 * @param row
 */
const handleEdit = (title, row = null) => {
    showDialog.value = true;
    dialogTitle.value = title;
    rowData.value = row;
};

/**
 * @description: dialog事件
 * @return {*}
 * @param e
 */
const handelDialog = (e) => {
    showDialog.value = e;
    getDataList();
};
/**删除行数据
 * @description:
 * @param {*}
 * @return {*}
 */
const handleDel = (row) => {
    proxy
        .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
        })
        .then(async () => {
            const { code } =
                await VE_API.cloudNetwork.lazyNettyClientTokenBucketProviderDelete(
                    {
                        appKey: row.appKey,
                    },
                );
            if (code === 0) {
                getDataList();
            }
        })
        .catch(() => {
            proxy.$message({
                type: "info",
                message: "已取消删除",
            });
        });
};
const handleCopyDocker = async (row) => {
    console.log("copyData", row);
    if (row === "") {
        ElMessage.warning("请输入文本再复制");
        return;
    }
    try {
        // 获取host
        let docker_command =
            "docker run -d -it --privileged " +
            " --name client " +
            " -p 6004:6004 " +
            " -e spring.lazy.netty.client.inet-host=" +
            window.location.hostname +
            " -e spring.lazy.netty.client.inet-port= " +
            (parseFloat(window.location.port) + 1000) +
            " -e spring.lazy.netty.client.client-id=" +
            uuid.v5.id +
            " -e spring.lazy.netty.client.app-key=" +
            row.appKey +
            " -e spring.lazy.netty.client.app-secret=" +
            row.appSecret +
            " registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.2.8-JDK17-SNAPSHOT";

        await toClipboard(docker_command);
        ElMessage.success(`复制: ${docker_command} 成功！`);
    } catch (error) {
        ElMessage.warning(`复制失败: ${error} ！`);
        console.error(error);
    }
};
/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } =
        await VE_API.cloudNetwork.lazyNettyClientTokenBucketProviderPage(
            params,
        );
    if (code === 0) {
        const { size, current, total, records } = data;
        params.size = size;
        params.current = current;
        params.total = total;
        tableData.value = records;
    }
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss" scoped></style>
